<template>
	<app-layout>
		<view class="nav">
			<!-- <image load-lazy="true" class="nav-bg" src="./../image/index_BG.png"></image> -->
			<!-- <view class="nav-title">{{custom_setting.words.can_be_presented.name}}</view>
			<view class="nav-num">{{index.money?index.money:0}}元</view> -->
			<view class="nav-title">可提现佣金</view>
			<view class="nav-num">{{share.temp_money?share.temp_money:0}}元</view>
			<!-- <view @click="toAbout" class="about">
				<image load-lazy="true" src="./../image/about.png"></image>
			</view> -->
			<!-- <view class="nav-shop" @click="router('/pages/user-center/point-mall/point-mall')">
				兑换
			</view> -->
			<view class="nav-shop" @click="route('/pages/share/cash/cash?money=' + share.temp_money)">
				{{custom_setting.words.cash.name}}
			</view>
			<!-- <view class="nav-shop" @click="router('/plugins/lottery/index/index')">
				抽奖
			</view> -->
			<view class="exlog">
				<!-- <view class="log">
					<view>{{custom_setting.words.already_presented.name}}</view>
					<view class="text">{{index.cash_money?index.cash_money:0}}元</view>
				</view> -->
				<view class="log">
					<view>总佣金</view>
					<view class="text">{{index.total_money?index.total_money:0}}元</view>
				</view>
				<view class="exchange">
					<view>结算佣金</view>
					<view class="text">{{index.money?index.money:0}}元</view>
				</view>
				<!-- <view class="exchange">
					<view>{{custom_setting.words.order_money_un.name}}</view>
					<view class="text">{{index.order_money_un?index.order_money_un:0}}元</view>
				</view> -->
			</view>
		</view>
		<!-- </view> -->
		<view class="list dir-left-wrap">
			<view class="list-item">
				<view @click="route('/pages/share/order/order')">
					<image :src="custom_setting.menus.order.icon"></image>
					<view>{{custom_setting.menus.order.name}}</view>
				</view>
			</view>
			<view class="list-item">
				<view @click="route('/pages/share/cash-detail/cash-detail')">
					<image :src="custom_setting.menus.cash.icon"></image>
					<view>{{custom_setting.menus.cash.name}}</view>
				</view>
			</view>
			<!-- 用户须知 -->
			<view class="list-item">
				<view @click="route('/pages/share/qrcode/qrcode')">
					<image :src="custom_setting.menus.qrcode.icon"></image>
					<view>{{custom_setting.menus.qrcode.name}}</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import uOrdinaryList from '../../../components/page-component/u-goods-list/u-ordinary-list.vue';

	export default {
		components: {
			uOrdinaryList
		},
		data() {
			return {
				setting: null,
				status: -1,
				customize: [],
				name: null,
				first: false,
				page_loading: true,
				inApply: false,
				apply: false,
				template_message: null,
				index: [],
				order_price: null,
				goods_list: null,
				cat_list: null,
				share: null,
				stock: null,
				region: null,
				is_can_apply: false
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info,
				custom_setting: state => state.mallConfig.share_setting_custom,
				share_setting: state => state.mallConfig.share_setting,
				mall: state => state.mallConfig.mall
			}),
			percent() {
				if (this.order_price === null) {
					return 0;
				} else {
					return parseFloat(this.order_price) / parseFloat(this.share_setting.auto_share_val) * 100;
				}
			},
			condition() {
				if (this.share_setting.share_condition == 3) {
					return '自动';
				} else {
					return '申请';
				}
			},
			...mapGetters('mallConfig', {
				getTheme: 'getTheme'
			})
		},
		methods: {
			toApply() {
				this.apply = !this.apply;
			},
			route(url) {
				uni.navigateTo({
					url: url
				})
			},
			subscribe() {
				this.$subscribe(this.template_message).then(() => {
					this.submit();
				}).catch(() => {
					this.submit();
				});
			},
			submit() {
				let that = this;
				uni.showLoading({
					title: '提交中...'
				});
				if (that.inApply) {
					return false
				}
				that.inApply = true;
				that.$request({
					url: that.$api.share.apply,
					data: {
						name: that.userInfo.nickname,
						mobile: that.userInfo.mobile
					},
					method: 'post'
				}).then(response => {
					that.inApply = false;
					uni.hideLoading();
					if (response.code === 0) {
						that.status = 0;
						if (that.share_setting.share_condition == '3') {
							that.status = 1;
						}
						that.apply = false;
						that.getStatus();
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			getList() {
				let that = this;
				that.$request({
					url: that.$api.share.index,
				}).then(response => {
					that.$hideLoading();
					if (response.code === 0) {
						that.index = response.data.list;
						that.setting = response.data.bonus_setting.list;
						that.stock = response.data.stock_setting;
						that.region = response.data.region_setting;
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none',
							duration: 1000
						});
					}
				}).catch(() => {
					that.$hideLoading();
				});
			},
			getStatus() {
				let that = this;
				that.$request({
					url: that.$api.share.new_apply_status,
				}).then(response => {
					that.first = true;
					if (response.code === 0) {
						that.template_message = response.data.template_message;
						that.status = response.data.status;
						that.share = response.data.share;
						that.order_price = response.data.orderPrice;
						that.goods_list = response.data.goodsList;
						that.cat_list = response.data.catList;
						that.is_can_apply = response.data.is_can_apply;
						if (that.status == 1) {
							that.getList();
							let name = response.data.share.name;
							if (that.share_setting.share_condition == '3') {
								name = that.userInfo.nickname
							}
							that.name = name;
						} else if (that.status == 2) {
							that.$hideLoading();
							if (this.share_setting.share_condition == '1' || this.share_setting.share_condition ==
								3) {
								that.apply = true;
							}
						} else {
							that.$hideLoading();
						}
					} else {
						that.$hideLoading();
						uni.showModal({
							content: response.msg,
							showCancel: false
						})
					}
				}).catch(() => {
					that.$hideLoading();
					that.$event.on(that.$const.EVENT_USER_LOGIN).then(() => {
						that.$store.dispatch('user/info');
						that.getStatus();
					});
				});
			},
			againApply() {
				if (this.is_can_apply) {
					if (this.share_setting.share_condition == '1' || this.share_setting.share_condition == 3) {
						this.apply = true;
					} else {
						this.route('/pages/share/add/add?template_message=' + JSON.stringify(this.template_message));
					}
				} else {
					this.status = 3;
				}
			},
			toGoods(cat_id) {
				this.$jump({
					url: '/pages/goods/list?cat_id=' + cat_id,
					open_type: 'navigate'
				});
			}
		},
		onLoad() {
			if (this.$user.isLogin()) {
				this.$store.dispatch('user/refreshInfo');
			}
			this.$showLoading({
				type: 'global',
				text: '加载中...'
			});
			this.getStatus();
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: '佣金',
				path: '/pages/share/index/index',
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: '佣金',
				query: {

				}
			});
		},
		onShow() {
			let that = this;
			if (that.first) {
				that.getStatus();
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		height: #{520rpx};
		width: 100%;
		position: relative;
		background: #342B2A;
		padding: 72rpx 72rpx 0;
	}

	.nav-bg {
		width: 100%;
	}

	.nav-title {
		width: 100%;
		// text-align: center;
		// position: absolute;
		// top: #{25rpx};
		// font-size: 28rpx;
		// line-height: 42rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		// color: #999;
		// font-size: 12px;
		margin-top: 30px;
	}

	.nav-num {
		// text-align: center;
		width: 100%;
		color: #FFFFFF;
		font-size: 72rpx;
		line-height: 108rpx;
		// position: absolute;
		// top: #{60rpx};
		// color: #ecb786;
		// font-size: 24px;
	}

	.nav-shop {
		text-align: center;
		width: 154rpx;
		height: 56rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 56rpx;
		background: linear-gradient(90deg, #FD6E60 0%, #FE4C4B 100%);
		border-radius: 28px;
		position: absolute;
		right: 72rpx;
		top: 188rpx;
		// position: absolute;
		// top: #{60rpx};
		// color: #ecb786;
		// font-size: 24px;
	}

	.exlog {
		background-color: #FFFFFF;
		position: absolute;
		bottom: -40rpx;
		color: #342B2A;
		padding: 30rpx 0;
		width: 600rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;

	}

	.exchange,
	.log {
		// color: #fff;
		font-size: 15px;
		// height: #{34rpx};
		line-height: #{34rpx};
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* .exchange image,
	.log image {
		height: #{34rpx};
		width: #{34rpx};
		margin-right: #{16rpx};
		display: block;
		float: left;
	} */

	.exchange {
		// left: #{120rpx};

		.text {
			font-size: #{26rpx};
			color: #ff8f17;
			margin-top: 24rpx;
		}
	}

	.log {
		// right: #{120rpx};

		.text {
			font-size: #{26rpx};
			color: #22af19;
			margin-top: 24rpx;
		}
	}

	.info {
		height: #{312rpx};
		background-color: #ff4544;
		width: 100%;
		padding: #{20rpx} #{25rpx} 0;
		color: #fff;
		font-size: #{28rpx};
		background-repeat: no-repeat;
		background-size: #{750rpx} #{312rpx};
	}

	.user-info {
		border-bottom: #{1rpx} solid #FFFFFF;
		padding-bottom: #{20rpx};

		.arrow-right {
			width: #{12rpx};
			height: #{22rpx};
			margin-left: #{12rpx};
			display: block;
		}
	}

	.user-avatar {
		width: #{120rpx};
		height: #{120rpx};
		border-radius: 50%;
		font-size: #{26rpx};
		margin-right: #{40rpx};
	}

	.user-name {
		font-size: #{36rpx};
	}

	.mtb-10 {
		margin: #{10rpx 0};
	}

	.share-info {
		float: left;
		margin-top: #{20rpx};
		font-size: #{28rpx};
	}

	.share-info text {
		font-size: #{46rpx};
	}

	.withdraw-btn {
		float: right;
		width: #{105rpx};
		border-radius: #{28rpx};
		height: #{56rpx};
		line-height: #{54rpx};
		font-size: #{28rpx};
		color: #fff;
		background-color: auto;
		text-align: center;
		border: #{2rpx} solid #fff;
		padding: 0;
		margin-top: #{48rpx};
	}

	.withdraw-btn::after {
		border: 0;
	}

	.fnav {
		background-color: #fff;
		height: #{160rpx};
		padding: #{40rpx} 0;
		text-align: center;
		font-size: #{30rpx};
		color: #666;
		width: #{702rpx};
		margin: #{16rpx} auto 0;
		border-radius: #{10rpx};

		.nav-left {
			margin-left: #{-1rpx};
			border-right: #{1rpx} solid #bbb;
		}

		.nav-title {
			font-size: #{26rpx};
			color: #ff8f17;
			margin-bottom: #{10rpx};
		}

		.nav-left .nav-title {
			color: #22af19;
		}
	}

	.fnav>view {
		width: 50%;
		text-align: center;
	}



	.list {
		margin: #{72rpx} auto 0;
		background-color: #fff;
		width: #{702rpx};
		border-radius: #{10rpx};
	}

	.list-item {
		height: #{220rpx};
		width: #{234rpx};
		text-align: center;
		padding-top: #{57rpx};
		font-size: #{24rpx};
		color: #666;
	}

	.list-item image {
		height: #{61rpx};
		width: #{61rpx};
		vertical-align: top;
		margin-top: #{-10rpx};
		margin-bottom: #{28rpx};
	}

	.list-item text {
		color: #ff6868;
	}

	.list-item.no-border {
		border-bottom: 0;
	}

	.no-pass {
		position: absolute;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		background-color: #fff;
		text-align: center;
		padding-top: #{150rpx};
		color: #666;
		font-size: #{30rpx};
	}

	.no-pass-img {
		height: #{240rpx};
		width: #{420rpx};
		margin-bottom: #{80rpx};
	}

	.no-pass-btn {
		height: #{80rpx};
		width: #{560rpx};
		border-radius: #{40rpx};
		margin: #{88rpx} auto 0;
		color: #fff;
		font-size: #{30rpx};
		line-height: #{80rpx};
		background: #ff4544;
	}

	.withdraw-btn:active {
		background-color: rgba(0, 0, 0, 0.2);
	}

	.add-bg {
		height: #{300rpx};
		width: 100%;
		display: block;
		margin-bottom: #{20rpx};
		background-color: #f7f7f7;
	}

	.thx {
		padding: #{100rpx};
		text-align: center;
		color: #666;
		font-size: #{30rpx};
	}

	.thx image {
		height: #{80rpx};
		width: #{80rpx};
		margin-bottom: #{50rpx};
	}

	.submit {
		background-color: #f7f7f7;
		margin: 0 #{-24rpx};
		padding: #{24rpx};
	}

	.submit button {
		color: #fff;
		font-size: #{30rpx};
		font-weight: bold;
		height: #{100rpx};
		border-radius: #{50rpx};
		line-height: #{100rpx};
		background: #ff4544;
	}

	.bg {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 10;
	}

	.dialog {
		position: fixed;
		top: #{400rpx};
		left: 0;
		right: 0;
		height: #{300rpx};
		width: #{640rpx};
		margin: 0 auto;
		z-index: 21;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		font-size: #{30rpx};
	}

	.dialog-title {
		margin: #{40rpx} auto #{35rpx};
	}

	.dialog-btn {
		height: #{88rpx};
		width: #{640rpx};
		border-top: #{1rpx} solid #e2e2e2;
		line-height: #{88rpx};
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.dialog-close,
	.dialog-submit {
		width: 50%;
	}

	.line {
		height: #{44rpx};
		margin-top: #{22rpx};
		width: #{1rpx};
		background-color: #e2e2e2;
	}

	.dialog-submit {
		color: #ff4544;
	}

	.apply-status-4 {
		border-bottom: #{1rpx solid #e2e2e2};
		padding-bottom: #{32rpx};
		margin-bottom: #{32rpx};
		font-size: $uni-font-size-import-one;
		color: #353535;
	}

	.thx image.warning {
		width: #{160rpx};
		height: #{160rpx};
	}

	.again-apply {
		button {
			width: #{320rpx};
		}
	}

	.status-3 {
		background-color: #ffffff;
		min-height: 100vh;

		.submit {
			background-color: #ffffff;
			margin-top: #{160rpx};
			margin-left: 0;
			margin-right: 0;
		}
	}

	.apply-status-3 {
		padding: #{0 24rpx};
		margin-top: #{57rpx};

		.money {
			width: #{125rpx};
			height: #{100rpx};
			display: block;
		}

		.progress {
			width: #{470rpx};
			border-radius: #{5rpx};
			position: relative;

			.progress-content {
				position: absolute;
				top: -10rpx;
				z-index: 10;
				text-align: center;
				font-size: $uni-font-size-weak-one;

				.shuxian {
					width: #{2rpx};
					height: #{13rpx};
					border: #{1rpx solid #eeeeee};
				}

				.icon {
					width: #{35rpx};
					height: #{35rpx};
					display: block;
				}

				.q-price {
					color: #ff4544;

					&:before {
						content: '￥';
					}
				}
			}
		}

		.price {
			text-align: center;
			color: #999999;
			margin-left: #{20rpx};

			view:last-child {
				color: #ff4544;
			}
		}

		.content {
			text-align: center;
			color: #353535;
			font-size: #{35rpx};
			margin-top: #{47rpx};

			text {
				color: #ff4544;
				font-size: #{45rpx};
			}
		}
	}

	.share-goods-status-1 {
		.content {
			text-align: center;
			color: #353535;
			font-size: #{35rpx};
			margin-top: #{60rpx};
			margin-bottom: #{80rpx};

			text {
				color: #ff4544;
				font-size: #{45rpx};
			}
		}

		.goods-title {
			color: #a6a6a6;
			margin-top: #{36rpx};
			margin-bottom: #{34rpx};

			.border {
				width: #{40rpx};
				border: #{1rpx solid #a6a6a6};

				&:first-child {
					margin-right: #{24rpx};
				}

				&:last-child {
					margin-left: #{24rpx};
				}
			}

			image {
				width: #{24rpx};
				height: #{24rpx};
				display: block;
				margin-right: #{12rpx};
			}
		}
	}

	.cat-list {
		padding: #{0 24rpx};

		.cat-item {
			width: #{221rpx};
			padding: #{10rpx 27rpx};
			font-size: $uni-font-size-general-one;
			border-radius: #{30rpx};
			border: #{2rpx solid #e2e2e2};
			background-color: #ffffff;
			margin-right: #{18rpx};
			margin-bottom: #{34rpx};
			text-align: center;
		}
	}

	.disabled {
		padding-top: #{156rpx};

		.disabled-img {
			width: #{240rpx};
			height: #{237rpx};
			display: block;
		}

		.disabled-text {
			font-size: $uni-font-size-general-two;
			color: #999999;
			margin-top: #{62rpx};
		}

		.disabled-btn {
			margin-top: #{80rpx};
			width: #{320rpx};
			height: #{80rpx};
			font-size: $uni-font-size-import-two;
			color: #ffffff;
			background: #ff4544;
			border-radius: #{40rpx};
			text-align: center;
			line-height: #{80rpx};
		}
	}
</style>
